<template>
    <div class="CalendarTable">
        <table>
            <thead>
                <tr>
                    <td v-for="(item, index) in weekData" :key="index">
                        <div class="titletext">{{ item }}</div>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in HandleArr" :key="index">
                    <td v-for="(item2, index2) in item" :key="index2">
                        <div class="td-div">
                            <div class="Date">
                                <span style="font-weight: bold;"
                                    :class="(todaydate === item2.day && todaymonth === month && todayyear === year) ? 'on' : ''">{{
                                        item2.day
                                    }}</span><span><span style="font-size: 8px;">{{ todaydate === item2.day && todaymonth === month && todayyear === year?item2.lunarMonthName:'' }}</span>{{ item2.lunarDayName }}</span>
                            </div>
                            <div class="Festival">
                                <span class="lunarFestival" @click='MemorialClick(item2.lunarFestival)'>{{
                                    item2.lunarFestival }}</span>
                                <span class="solarFestival" @click='MemorialClick(item2.solarFestival)'>{{
                                    item2.solarFestival?.length < 8 ? item2.solarFestival : '' }} </span>
                                <span class="term" @click='MemorialClick(item2.term)'>{{ item2.term }}</span>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
// @ts-ignore
import LunarCalendar from 'lunar-calendar';
// 父组件传递过来的参数
const Props = defineProps(['year', 'month', 'boolean']);

let now = new Date();
// 获取当前公历天日期
let todaydate = now.getDate();
// 获取当前时间的公历月份
let todaymonth = +now.getMonth() + 1;
// 获取当前时间的公历年份
let todayyear = +now.getFullYear();

// 存放渲染数据的响应式数组
let HandleArr: any;
// 星期的渲染数据
let weekData = reactive([
    '周日',
    '周一',
    '周二',
    '周三',
    '周四',
    '周五',
    '周六'
]);
// 定义RiliFunc函数，参数为year（年份）、month（月份）、boolean（布尔值，默认为true）
const RiliFunc = (year?: number, month?: number, boolean: Boolean = true) => {
    // 创建一个响应式数组
    const CalendarArr: any = reactive([]);
    // 调用LunarCalendar.calendar方法 第一参数是要获取的年份 第二个参数是要获取的月份 第三个参数是是否补齐日期
    const newData = () => {
        // 调用LunarCalendar.calendar方法 第一参数是要获取的年份 第二个参数是要获取的月份 第三个参数是是否补齐日期
        return LunarCalendar.calendar(year ? year : todayyear, month ? month : todaymonth, boolean);
    };

    // 定义NumFun函数，参数为ages（数组）
    const NumFun = (ages: []) => {
        // 遍历ages数组
        for (let i = 0; i < ages.length; i++) {
            // 如果i除以7的余数为0，则将ages数组从i开始到7+i结束的元素放入CalendarArr数组中
            if (i % 7 === 0) {
                if (i !== 0) {
                    CalendarArr.push(ages.slice(i, 7 + i));
                } else {
                    CalendarArr.push(ages.slice(i, 7));
                }
            }
        }
    };
    // 调用NumFun函数，参数为newData函数返回的monthData
    NumFun(newData().monthData);
    // 返回CalendarArr数组
    return CalendarArr;
};

// 自动监听有没有父组件传递过来的参数
watch(Props, () => {
    // 监听Props的year、month、boolean属性，并将其传入RiliFunc函数，将返回值赋值给HandleArr
    HandleArr = RiliFunc(Props.year && Props.year, Props.month && Props.month, Props.boolean && Props.boolean);
}, { deep: true, immediate: true });

// 纪念日的点击事件
const Emit = defineEmits(['CalendarMemorialClick']);
const MemorialClick = (type: string) => {
    Emit('CalendarMemorialClick', type);
};


</script>

<style scoped lang="scss">
.CalendarTable {
    width: 90%;
    height: auto;
    margin: auto;
    background: #fff;
}

table {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;

    thead {
        width: 100%;
        height: 10%;

        tr {
            td {
                border: 1px solid #E6EBED;

                .titletext {
                    height: 30px;
                    font-family: "STHeiti";
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

            }
        }
    }

    tbody {
        width: 100%;
        height: 90%;

        tr {
            td {
                width: 14%;
                border: 1px solid #E6EBED;

                .td-div {
                    font-size: 12px;
                    display: flex;
                    width: 100%;
                    height: 80px;
                    flex-direction: column;

                    .Date {
                        width: 100%;
                        height: 30%;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;

                        .on {
                            width: 20px;
                            height: 20px;
                            border-radius: 3px;
                            background: #1261FF;
                            color: #fff;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }

                    .Festival {
                        margin: 0 auto;
                        width: 98%;

                        span {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                        }

                        .lunarFestival {
                            display: flex;
                            box-sizing: border-box;
                            background: #E7EFFF;
                            border-left: 2px solid #1261FF;

                        }

                        .lunarFestival:hover {
                            background: #1261FF;
                            color: #fff;
                        }

                        .solarFestival {
                            display: flex;
                            background: #FEF7E7;
                            box-sizing: border-box;
                            border-left: 2px solid #F8AE15;
                        }

                        .solarFestival:hover {
                            background: #F8AE15;
                            color: #fff;
                        }

                        .term {
                            display: flex;
                            box-sizing: border-box;
                            background: #E6F6F5;
                            border-left: 2px solid #0EABA1;
                        }

                        .term:hover {
                            background: #0EABA1;
                            color: #fff;
                        }
                    }
                }
            }
        }

    }
}
</style>